'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { Modal,Switch,Input,Form } from 'antd';
import { setDialog }   from '../../../reducers/common/actions.js';
import { saveRow }   from '../../../reducers/role/actions.js';
const FormItem = Form.Item;

class RoleEditDialog extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let { row,dialogKey,confirmLoading } = this.props;
        let visible = this.props.dialog[dialogKey] ? true : false;
        const { getFieldProps } = this.props.form;
        row = row ? row : {};
        let modalTitle = (row.key ? "修改":"新加")+"角色";
        const nameProps = getFieldProps('name', {
            initialValue:row.name,
            rules: [
                { required: true, min: 2,max:10,message: '2-10 位字符' },
            ],
        });
        const notesProps = getFieldProps('notes', {
            initialValue:row.notes
        });
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        let modalProps = {};
        return (
            <Modal
                {...modalProps}
                title={modalTitle}
                visible={visible}
                confirmLoading={confirmLoading}
                onOk={this.handleOk.bind(this)}
                onCancel={this.handleCancel.bind(this)} >
                    <Form horizontal>
                        <FormItem
                            hasFeedback
                            {...formItemLayout}
                            label="角色名">
                            <Input type="text" {...nameProps} placeholder="" />
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="备注">
                            <Input type="textarea" {...notesProps} placeholder="" />
                        </FormItem>
                    </Form>

            </Modal>
        )
    }
    handleOk(){
        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                //console.log('Errors in form!!!');
                return;
            }
            //console.log('Submit!!!');
            //console.log(values);
            this.props.saveRow(values,()=>{
                this.props.setDialog(this.props.dialogKey,false);
            })
        });
    }
    handleCancel(e){
        let { confirmLoading } = this.props;
        if( confirmLoading ) return false;
        this.props.setDialog(this.props.dialogKey,false);
    }
}

export default connect(
    state =>{
        return {
            row:state.role.row,
            confirmLoading:state.common.loading,
            dialog: state.common.dialog,
        };
    },
    dispatch => {
        return {
            setDialog:(key,value)=>dispatch(setDialog(key,value)),
            saveRow:(row,cb)=>dispatch(saveRow(row,cb))
        }
    }
)(Form.create()(RoleEditDialog));